<script setup>
import {validateNull} from '@/util/validate'

import {useTagList} from "@/stores/index.js";
import router from "@/router/index.js";
const props = defineProps({
  menu: Array,
})



const open = (v)=>{
  router.push({
    path:v.fullPath,
  })
  const tag = {
    label:v.label, path:v.fullPath
  }
  useTagList().addTag(tag)
}

</script>

<template>
  <template v-for="item in menu" :key="item.id">
    <el-menu-item v-if="validateNull(item.children)"
                  :index="item.path"

                  style="width: 100vh;height: 50px"
                  :route="item.path"
                  >

      <template #title>
        <i :class="item.icon" style="font-size: 16px;margin-right: 10px"></i>
        <span>{{ item.label }}</span>
      </template>
    </el-menu-item>
    <el-sub-menu v-else-if="!validateNull(item.children)"
                 :index="item.path"
                  >
      <template #title>
        <i :class="item.icon" style="font-size: 16px;margin-right: 10px"></i>
        <span>{{ item.label }}</span>
      </template>
      <template v-for="(child,cindex) in item.children"
                :key="child.name">
        <el-menu-item :index="child.fullPath"
                      style="width: 100%"
                      @click="open(child)"
                      v-if="validateNull(child.children)">

          <template #title>
            <i :class="child.icon" style="font-size: 16px;margin-right: 10px"></i>
            <span>{{ child.label }}</span>
          </template>
        </el-menu-item>
        <sidebar-item v-else
                      :menu="[child]"
                      :key="cindex"></sidebar-item>
      </template>
    </el-sub-menu>
  </template>
</template>

<style scoped lang="scss">
//.el-menu-item:hover{
//  outline: 5px !important;
//  color: #1D62D9 !important;
//  background: #1D62D933 !important;
//}
//.el-menu-item.is-active {
//
//  color: #1D62D9 !important;
//  background: #1D62D933 !important;
//  border-left: 3px solid #1D62D9; /* 蓝色方块 */
//  padding-left: 18px; /* 根据需要调整 */
//}

//
//.custem-menu{
//  outline: 5px !important;
//  color: #1D62D9 !important;
//  background: #1D62D933 !important;
//}
</style>